<template>
  <div class="nav-head">
    <div class="db-head">
      <div class="db-bg" :style="style">
        <!-- 轮播图上方链接 -->
        <div class="db-top clearfix">
          <div class="db-link">
            <span class="float-left top-span">完本推荐</span>
            <router-link to="/" class="d-block float-right top-a"
              ><img :src="src1" alt="" />排行</router-link
            >
            <router-link to="" class="d-block float-right top-a"
              ><img :src="src" alt="" />书库</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
    data(){
      return{
        src:"./image/icon-library.png",
        src1: "./image/icon-ranking-list.png",
        style:{
          backgroundImage: "url(../image/carousel/banner-finalized.png)",
        }
      }
    }
  
}
</script>

<style lang="scss">
.db-head {
  width: 100%;
  min-width: 1320px;
  margin: 0 auto;

  .db-bg {
    height: 110px;
    
    background-size: 100% 110px;
    background-repeat: no-repeat;
  }

  .db-top {
    width: 1200px;
    height: 110px;
    margin: 0 auto;

    .db-link {
      line-height: 110px;

      .top-span {
        width: 120px;
        height: 33px;
        // line-height: 110px;
        color: #333;
        font-size: 30px;
      }

      .top-a img {
        width: 30px;
        height: 20px;
      }

      .top-a {
        width: 100px;
        height: 30px;
        text-decoration: none;
        color: #333;
        line-height: 30px;
        font-size: 13px;
        margin-left: 8px;
        text-align: center;
        background-color: rgb(255, 255, 255);
        border-radius: 5px;
        margin-top: 40px;
        margin-bottom: 40px;
      }

      .top-a:hover {
        background-color: rgb(56, 158, 172);
        color: rgb(255, 255, 255);
      }
    }
  }
}
</style>